Template Engines হল এমন টুল যা HTML টেমপ্লেটগুলিকে ডাইনামিকভাবে তৈরি ও রেন্ডার করতে ব্যবহৃত হয়। এটি সাধারণত সার্ভার সাইডে ব্যবহার করা হয় যেখানে ডাটাবেস বা অন্যান্য ডাটা সোর্স থেকে ডাটা নিয়ে তা HTML এ রেন্ডার করা হয়। Pug এবং EJS হল দুটি জনপ্রিয় টেমপ্লেট ইঞ্জিন, যা Node.js অ্যাপ্লিকেশনগুলিতে ডাইনামিক HTML পেজ তৈরি করতে ব্যবহৃত হয়।
১. Pug (পুগ) টেমপ্লেট ইঞ্জিন
Pug (আগে Jade নামে পরিচিত) হল একটি শক্তিশালী এবং হালকা ওজনের টেমপ্লেট ইঞ্জিন যা HTML এর পরিবর্তে ইন্ডেন্টেড সিনট্যাক্স ব্যবহার করে। এটি ডাইনামিক ওয়েব পেজ তৈরি করতে সাহায্য করে এবং কোড আরও পরিষ্কার এবং সংক্ষিপ্ত রাখে।
Pug এর বৈশিষ্ট্য:
- সিনট্যাক্স সিমপ্লিফাইড: Pug সহজ এবং সংক্ষিপ্ত সিনট্যাক্স ব্যবহার করে।
- প্রতিটি ট্যাগ ইন্ডেন্টেশন দ্বারা বোঝানো হয়: HTML ট্যাগের সঠিক হায়ারার্কি ইন্ডেন্টেশন দ্বারা তৈরি হয়।
- ফাংশনালিটি: ডাইনামিক কনটেন্ট এবং ডাটা রেন্ডারিং সহজে সম্ভব।
Pug ইন্সটল এবং কনফিগারেশন:
Pug ইনস্টল করা:
প্রথমে, Pug ইন্সটল করতে হবে।npmব্যবহার করে এটি ইনস্টল করা যায়:npm install pugExpress এ Pug কনফিগার করা:
const express = require('express'); const app = express(); // Pug টেমপ্লেট ইঞ্জিন হিসেবে ব্যবহার করা app.set('view engine', 'pug'); app.set('views', './views'); // Views ডিরেক্টরি নির্দিষ্ট করা // একটি রাউট তৈরি করা app.get('/', (req, res) => { res.render('index', { title: 'Pug Example', message: 'Hello World!' }); }); app.listen(3000, () => { console.log('Server started on http://localhost:3000'); });Pug টেমপ্লেট ফাইল (views/index.pug):
doctype html html head title= title body h1= messageএখানে,
titleএবংmessageডাইনামিক ডাটা হিসেবে পাস করা হচ্ছে। Pug সিনট্যাক্সে কোনো ক্লোজিং ট্যাগের প্রয়োজন নেই এবং ইন্ডেন্টেশন দিয়ে HTML এর স্ট্রাকচার বুঝানো হয়।
২. EJS (Embedded JavaScript Templates)
EJS (Embedded JavaScript) হল আরেকটি জনপ্রিয় টেমপ্লেট ইঞ্জিন যা HTML টেমপ্লেটের মধ্যে JavaScript কোড এমবেড করে ডাইনামিক কনটেন্ট রেন্ডার করে। EJS সাধারণত HTML টেমপ্লেটের মধ্যে <%= %> সিনট্যাক্স ব্যবহার করে ডাটা প্রবাহ এবং কন্ডিশনাল লজিক হ্যান্ডেল করতে ব্যবহৃত হয়।
EJS এর বৈশিষ্ট্য:
- HTML টেমপ্লেট সিনট্যাক্স: EJS এ HTML সিনট্যাক্স খুবই পরিচিত এবং সহজ।
- ডাইনামিক কনটেন্ট: JavaScript কোড ইনলাইন করা যায় এবং ডাইনামিকভাবে HTML তৈরি করা যায়।
- ইন্টিগ্রেশন: এটি বিভিন্ন ডাটাবেস এবং ডাইনামিক ডাটা সোর্সের সাথে সহজে ইন্টিগ্রেট করা যায়।
EJS ইন্সটল এবং কনফিগারেশন:
EJS ইনস্টল করা:
npm install ejsExpress এ EJS কনফিগার করা:
const express = require('express'); const app = express(); // EJS টেমপ্লেট ইঞ্জিন হিসেবে ব্যবহার করা app.set('view engine', 'ejs'); app.set('views', './views'); // Views ডিরেক্টরি নির্দিষ্ট করা // একটি রাউট তৈরি করা app.get('/', (req, res) => { res.render('index', { title: 'EJS Example', message: 'Hello from EJS!' }); }); app.listen(3000, () => { console.log('Server started on http://localhost:3000'); });EJS টেমপ্লেট ফাইল (views/index.ejs):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> </head> <body> <h1><%= message %></h1> </body> </html>এখানে,
<%= title %>এবং<%= message %>এর মাধ্যমে ডাইনামিক ডাটা টেমপ্লেটে অন্তর্ভুক্ত করা হয়েছে।
৩. Pug এবং EJS এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Pug | EJS |
|---|---|---|
| সিনট্যাক্স | HTML এর পরিবর্তে ইন্ডেন্টেড সিনট্যাক্স | HTML টেমপ্লেট সিনট্যাক্স |
| অন্যন্য কোড ব্যবহার | JavaScript কোড সহ ইন্ডেন্টেশন | <%= %> সিনট্যাক্স ব্যবহার |
| ক্লোজিং ট্যাগ | প্রয়োজন নেই (ইন্ডেন্টেশন দিয়ে বোঝানো হয়) | HTML ক্লোজিং ট্যাগ ব্যবহৃত হয় |
| কোডিং স্টাইল | আরও কমপ্যাক্ট এবং সহজ | পরিচিত HTML সিনট্যাক্সে কাজ করা যায় |
| ইউজার ফ্রেন্ডলি | কমপ্যাক্ট সিনট্যাক্স থাকার কারণে নতুনদের জন্য সহজ হতে পারে | পরিচিত HTML সিনট্যাক্স ব্যবহার, কিন্তু আরও বেশি কাস্টমাইজেশন সুবিধা রয়েছে |
সারাংশ
- Pug এবং EJS হল দুইটি জনপ্রিয় টেমপ্লেট ইঞ্জিন যা ডাইনামিক HTML পেজ তৈরি করতে ব্যবহৃত হয়। Pug একটি হালকা ওজনের টেমপ্লেট ইঞ্জিন, যা HTML ট্যাগগুলি ইন্ডেন্টেশন দিয়ে বোঝায় এবং কোড আরও ছোট ও পরিষ্কার রাখে। EJS HTML সিনট্যাক্স ব্যবহার করে এবং ইনলাইন JavaScript কোড দিয়ে ডাটা প্রসেসিং করতে সক্ষম।
- Pug বেশি সিনট্যাক্স সংক্ষেপক এবং পরিচিত HTML সিনট্যাক্স থেকে আলাদা, যখন EJS HTML এর সাথে বেশি প্রথাগতভাবে কাজ করে এবং ইনলাইন কোড ব্যবহারের সুবিধা দেয়।
- Node.js এর Express ফ্রেমওয়ার্কে উভয়ই ব্যবহৃত হতে পারে, এবং আপনি আপনার প্রয়োজন অনুযায়ী যেকোনো একটি নির্বাচন করতে পারেন।
Read more
